"use client";
import { useEffect, useRef, useState } from 'react'
import {clsx} from 'clsx'
import {motion,useInView} from 'framer-motion'

export default function Page () {
  const imgUrl = '/1.jpg'
  const ref = useRef(null)
  const inView = useInView(ref)


  return (
    <div className={'bg-slate-500 p-20'}>
      <div className={'bg-slate-700 p-20 h-screen text-center text-5xl'}>占位</div>
      <motion.ul className={'bg-slate-800 p-10 flex flex-col '}>
        {
          [1,2,3,4,5,6].map(item =>(
            <li key={item} className={clsx('odd:self-start even:self-end w-fit overflow-hidden duration-[2s]',
              inView ?
                'translate-x-0' :
                'odd:-translate-x-3/4 even:translate-x-3/4')} ref={ref}>
              <p className={'text-white font-mono text-2xl'}>
                千里之行，始于足下
                <br/>
                <small className={'text-sm'}>
                  A sjadfan asdfo wernwenfv
                </small>
              </p>
            </li>
          ))
        }

      </motion.ul>
      <div className={'bg-slate-700 p-20 h-screen text-center text-5xl'}>占位</div>
    </div>
  )
}
